- Resources
- OSS
- AI
- CSS
- JavaScript
- WordPress
- Weblog
Resources & Tools
- Vue.jsベースでプロジェクト管理とタスクのスケジューリング向けに設計されたオープンソースのガントチャートコンポーネント・「jordium-gantt-vue3」
- 様々なビジネス向けツールを1か所にまとめたオープンソースのオールインワンビジネス管理プラットフォーム・「TridahDrive」
- 複雑なセットアップやフレームワーク等も不要で気軽にAIバイブコーディングを試せるシンプルなOSS・「PikaIA」
- 開発者フレンドリーなオープンソースのLaravel向け高性能カレンダー管理システム・「Zap For Laravel」
- セキュリティファーストで設計されたオープンソースのWebフレームワーク・「Nalth」
- 軽量で高速、カスタマイズ性も高いオープンソースの非依存なJavaScript製リッチテキストエディター・「Editium」
- cPanelやPleskの代替として開発されたオープンソースのサーバー管理ツール・「Laranode」
- 高速で安全、大きめファイルも転送できるオープンソースのP2Pファイル転送アプリ・「DropSilk」
- アイデアをプロンプトとしてAIに伝えるとプレゼンを作成してくれるオープンソースのWebアプリ・「GENIS.AI」
- CometやAtlasの代替としてプライバシーファーストで設計されたオープンソースのAI搭載ブラウザ・「BrowserOS」
OSS
- Vue.jsベースでプロジェクト管理とタスクのスケジューリング向けに設計されたオープンソースのガントチャートコンポーネント・「jordium-gantt-vue3」
- 様々なビジネス向けツールを1か所にまとめたオープンソースのオールインワンビジネス管理プラットフォーム・「TridahDrive」
- 複雑なセットアップやフレームワーク等も不要で気軽にAIバイブコーディングを試せるシンプルなOSS・「PikaIA」
- 開発者フレンドリーなオープンソースのLaravel向け高性能カレンダー管理システム・「Zap For Laravel」
- セキュリティファーストで設計されたオープンソースのWebフレームワーク・「Nalth」
- 軽量で高速、カスタマイズ性も高いオープンソースの非依存なJavaScript製リッチテキストエディター・「Editium」
- cPanelやPleskの代替として開発されたオープンソースのサーバー管理ツール・「Laranode」
- 高速で安全、大きめファイルも転送できるオープンソースのP2Pファイル転送アプリ・「DropSilk」
- アイデアをプロンプトとしてAIに伝えるとプレゼンを作成してくれるオープンソースのWebアプリ・「GENIS.AI」
- CometやAtlasの代替としてプライバシーファーストで設計されたオープンソースのAI搭載ブラウザ・「BrowserOS」
AI
- 複雑なセットアップやフレームワーク等も不要で気軽にAIバイブコーディングを試せるシンプルなOSS・「PikaIA」
- アイデアをプロンプトとしてAIに伝えるとプレゼンを作成してくれるオープンソースのWebアプリ・「GENIS.AI」
- CometやAtlasの代替としてプライバシーファーストで設計されたオープンソースのAI搭載ブラウザ・「BrowserOS」
- ブラウザやAIの機能を備えたオープンソースのパーソナルAIノートアプリ・「Surf」
- 任意のプロンプトやドキュメント、Wikipedia等から生成AIによる年表の作成が可能なオープンソースのWebアプリ・「年表メーカー」
- 任意のAIチャットからフォーマットされた数式や表をそのままWordにコピーできるオープンソースのブラウザ拡張・「DeepShare」
- WordPressからインスピレーションを得て開発、AIも採用したオープンソースのRuby on Rails製CMS・「RailsPress」
- Laravelベースで構築されたオープンソースのAI駆動コンテンツジェネレーター・「AI Content Generator」
- 生成AIを活用したオープンソースの会議プラットフォーム・「TellMeMo」
- Laravelベースで開発されたオープンソースのAI駆動型ヘッドレスCMS・「PagibleAI CMS」
CSS snippet
- Tailwindからインスピレーションを得たスクロールアニメーション
- CSSだけで開閉するツリー
- 実用的でユニークなチェックボックスのまとめ・「Beautiful CSS checkboxes examples」
- CSSのみで昔のフィルム映像みたいなアニメーションノイズ
- CSSのみで白抜きテキスト内に波打つようなアニメーションエフェクト
- どのデバイスでもある程度はレイアウトが綺麗に見える100バイトのCSS
- 夢の中の景色のようなDreamy blurエフェクトをCSSで実装する
- :has()を使って親要素内に存在する子要素を数えるCSSのサンプル
- 非推奨のmarqueeタグのような動作をモダンなCSSで再現
- 文章の任意の行で文字省略を3点リーダーでなくグラデーションで
JavaScript snippet
- 任意のHTML要素を動的に生成する
- Webページに「Mastodonで記事をシェア」ボタンを設置するコード
- スクロールに応じて3Dモデルを回転させる
- localStorageで保存可能の、シンプルなテーマ切り替え
- 目線がマウスの動きを追う的なやつ
- CSS+JavaScriptでローディング時にスケルトンスクリーン
- VanillaなJavaScriptでページ内検索
- VanillaなJSでスクロールに応じて要素をアニメーション
- スクロール追従するページ内ナビゲーション
- jQueryプラグインのLettering.jsをVanillaに変換
WordPress Code
- 画像のURLから、その画像のIDを取得する
- カスタム投稿タイプの記事数をダッシュボードに表示させる
- 非公開や下書きの固定ページを親ページに設定できるようにする
- 一番最新の記事を除いた最新記事のリストを表示する
- 特定の親の固定ページに属する全ての子孫のリストを表示する
- ショートコードで任意の記事ページに関連記事を出す
- 記事内に、前後の記事に付与した任意のカスタムフィールドの値を表示する
- 記事を公開する前に確認アラートを出す
- Youtube動画にマウスホバーでSNSへのシェアボタンを表示させる
- タグクラウド内で現在閲覧中のページに付けられたタグをハイライトする
Weblog
- 任意の画像を設定すると、その画像に合った絵文字を表示してくれるWebサービス・「THE EMOJINI 3000」
- 任意の2つのテキストの差分をチェック、共有出来るツール・「Diff Checker」
- Googleの検索やマップ、GmailやDriveなどの様々なサービスをその場で利用出来るようにするChromeエクステンション・「Black Menu for Google」
- 登録したWebサイトをスマフォやタブレット等のモックアップ画像にはめ込んで実際に動作、Embedも出来る・「Mockerie.io」
- 多言語・多通貨対応のオープンソースECサイト構築ソフトウェア・PrestaShop
- 【献本御礼】 「CSS3+jQueryで作るスマートフォンサイトUI図鑑」をご献本頂きました
- alert()のダイアログのスタイルを変更するスクリプト・SweetAlert
- textareaやinput要素内の任意のテキストをハイライトするスクリプト・jQuery highlightTextarea
- 郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js
- 任意の要素を3D回転させ、立体的に見せる国産のjQueryプラグイン・TURNBOX.js